<template>
  <div class="cart-badge" @click="showCart">
    <el-badge :value="cartCount" :hidden="cartCount === 0">
      <i class="el-icon-shopping-cart-2"></i>
    </el-badge>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'CartBadge',
  computed: {
    ...mapGetters(['cartCount'])
  },
  methods: {
    showCart() {
      this.$emit('show-cart')
    }
  }
}
</script>

<style scoped>
.cart-badge {
  cursor: pointer;
  font-size: 22px;
  position: relative;
  margin-right: 15px;
}
</style> 